<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="utf-8">
</head>
<body>
<canvas id="lh_canvas" width="1200" height="600" style="border:1px solid #CCC;">
不支持canvas
</canvas>
<input min="0.5" max="3.0" step="0.01" value="1.0" type="range" style="display:block;margin:20px auto;width:800px;" /><!--html滑动杆-->
</body>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById("lh_canvas"); //调取canvas
        canvas.width = 700; //设置canvas宽
        canvas.height = 700; //设置canvas高
        var context = canvas.getContext("2d"); //设置canvas接口
        var image = new Image();//创造img的对象
        context.beginPath()//开始新的绘制
        image.src = "images/pdbj.jpg";//定义图片链接
        image.onload = function () {//保证获取到图片
           //context.drawImage(image, 0, 0); //定义canvas（0，0开始表示坐标）
           //context.drawImage(image, 0, 0, 100, 100); //(100,100表示图片大小)
             context.drawImage(image, 0, 0, 100, 100, 200, 200, 100, 100); //
             /*context.drawImage(image, sx, sy, sw, sy, dx, dy, dw, dy); 
               从sx、sy开始出截取sw、sy大小的图片渲染到从dx、dy处，大小为dw、dy
               其中canvas.width=dw，canvas.height=dy为全屏案例
               context.drawImage(image, sx, sy, sw, sy, dx, dy, canvas.width,canvas.height); 
             */
        }
        context.closePath()//结束新的绘制
    }
</script>
</html>